<template>
    <div class="container">
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="userInfo" flex="main:justify">
                <div flex="cross:center">
                    <img :src="user.userPhoto" class="userHeader"/>
                    <div class="userName Medium font13" v-text="user.userName"></div>
                </div>
                <div flex="cross:center" @click="changeExtand()">
                    <div class="font12 opacity5" v-text="$util.getDate(core.createTime)"></div>
                    <div class="extand" v-text="extand?'收起':'展开'"></div>
                    <img src="../../images/extand.png" class="extandIcon" ref="extandIcon">
                </div>
            </div>
            <div v-if="extand">
                <div class="title Medium font12" v-html="core.title"></div>
                <div class="content font12" v-html="core.content"></div>
                <ul class="audioList" v-if="audioList&&audioList.length>0">
                    <li class="audioItem" v-for="(audioItem,audioIndex) in audioList">
                        <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl"
                                      ref="audio" @closeAllAudio="closeAllAudio"></audio-player>
                    </li>
                </ul>
                <div class="swiper-container extandSwiper" v-if="imgList&&imgList.length>1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(slide,index) in imgList"
                             @click.stop="clientSwiper(imgList,index)">
                            <img v-lazy="slide.imgUrl+'?imageView2/0/w/375/format/jpeg'" v-if="slide.type==1"
                                 class="picesItem"/>
                            <img v-lazy="slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"
                                 class="picesItem"/>
                            <img src="../../images/play.png" class="play" v-if="slide.type==3"/>
                        </div>
                    </div>
                </div>
                <div class="oneImgBg" v-if="imgList&&imgList.length==1" @click.stop="clientSwiper(imgList,0)">
                    <img v-lazy="imgList[0].imgUrl+'?imageView2/0/w/375/format/jpeg'" v-if="imgList[0].type==1"/>
                    <img v-lazy="imgList[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="imgList[0].type==3"
                         class="picesItem"/>
                    <img src="../../images/play.png" class="play" v-if="imgList[0].type==3"/>
                </div>
                <div>
                    <div class="userCtrl" flex>
                        <div flex="cross:center" flex-box="1" @click="clickZan()">
                            <img src="../../images/zan.png" class="zan" v-if="praiseState==0"/>
                            <img src="../../images/zan_sel.png" class="zan" v-if="praiseState==1"/>
                            <div class="panelText">点赞</div>
                        </div>
                        <div flex="cross:center main:center" flex-box="1" @click="setComment('',0)">
                            <img src="../../images/question.png" class="qes"/>
                            <div class="panelText">提问</div>
                        </div>
                        <div flex="cross:center main:right" flex-box="1" @click="shareTch()">
                            <img src="../../images/share.png" class="share"/>
                            <div class="panelText">分享</div>
                        </div>
                    </div>
                    <div class="commentWrapper" :style="{paddingBottom:core&&core.commentList.length>0?0.12+'rem':0}">
                        <commentList :text="'提问 '" :commentObj="core" :type="'APP_MULTI_WORK'" :index="0"
                                     :classId="classId" ref="selfCommentList" v-if="core"></commentList>
                    </div>
                </div>
            </div>
            <div class="bgBottom"></div>
            <div class="dateCtrl" flex="main:center cross:center">
                <div class="timeModel" flex-box="0"
                     style="border-right:0.5px solid rgba(255,255,255,0.2)">
                    <div class="font10 opacity5" flex="main:center">开始时间</div>
                    <div class="font10 opacity5 dateTime"
                         v-text="new Date(core.beginTime*1000).getMonth()+1+'-'+new Date(core.beginTime*1000).getDate()"></div>
                </div>
                <div flex-box="0" class="swiperContainer">
                    <div class="swiper-container timeSwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(slide,index) in dayList"
                                 v-text="(parseInt(slide.toString().slice(-4).substr(0,2))<10?slide.toString().slice(-3).substr(0,1):slide.toString().slice(-4).substr(0,2))+'-'+(slide.toString().slice(-3).slice(1)<10?slide.toString().slice(-3).substr(-1):slide.toString().slice(-3).slice(1))"
                                 flex="main:center cross:center" @click="changeDate(index)"
                                 :style="{color:dayCtrl.dayList[index].replyNum>0?'#1dc6b4':'#fff'}" v-if="role==1"></div>
                            <div class="swiper-slide" v-for="(slide,index) in dayList"
                                 v-text="(parseInt(slide.toString().slice(-4).substr(0,2))<10?slide.toString().slice(-3).substr(0,1):slide.toString().slice(-4).substr(0,2))+'-'+(slide.toString().slice(-3).slice(1)<10?slide.toString().slice(-3).substr(-1):slide.toString().slice(-3).slice(1))"
                                 flex="main:center cross:center" @click="changeDate(index)"
                                 :style="{color:dayCtrl.dayList[index].replyNum==dayCtrl.allCount?'#1dc6b4':'#fff'}"
                                 v-if="role!=1"></div>
                        </div>
                    </div>
                </div>
                <div class="timeModel" flex-box="0"
                     style="border-left:0.5px solid rgba(255,255,255,0.2)">
                    <div class="font10 opacity5" flex="main:center">结束时间</div>
                    <div class="font10 opacity5 dateTime"
                         v-text="new Date(core.endTime*1000).getMonth()+1+'-'+new Date(core.endTime*1000).getDate()"></div>
                </div>
            </div>
            <div flex="main:center cross:center" class="msgInfo font12 opacity5" v-if="nowTime<core.beginTime">
                距离打卡作业开始还有<span v-text="dayCtrl.surplusDay"></span>天
            </div>
            <div class="homeworkList">
                <ul>
                    <li class="homeworkItem" v-for="(list,index) in replyList">
                        <div flex="main:justify cross:center" class="listTitle" @click="toStudentDetail(list)">
                            <div flex="cross:center">
                                <img :src="list.student.photoUrl+'?imageView2/0/w/80/format/jpeg'"
                                     v-if="list.student" class="listPhoto"/>
                                <div>
                                    <div class="font13" v-text="list.student.studentName"
                                         v-if="list.student"></div>
                                    <div class="listTime" v-text="$util.getDate(list.createTime)"></div>
                                </div>
                            </div>
                            <div class="setComment" flex="main:center cross:center" v-if="role!=1"
                                 @click.stop="setComment(index,list.tid)">点评
                            </div>
                        </div>
                        <ul class="listPices">
                            <li class="listPicesItem" v-for="(pic,index) in list.picesList" v-if="pic.type!=2"
                                @click.stop="clientSwiper(list.picesList,index)">
                                <img v-lazy="pic.imgUrl+'?imageView2/0/w/136/format/jpeg'" v-if="pic.type==1"
                                     class="picesItem"/>
                                <img v-lazy="pic.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="pic.type==3"
                                     class="picesItem"/>
                                <img src="../../images/play.png" class="play" v-if="pic.type==3"/>
                            </li>
                        </ul>
                        <ul class="audioListDetail">
                            <li class="audioItem" v-if="audioItem.type==2"
                                v-for="(audioItem,audioIndex) in list.picesList">
                                <audio-player :url="audioItem.imgUrl" :time="audioItem.time" :audioId="audioItem.imgUrl"
                                              ref="audio" @closeAllAudio="closeAllAudio"></audio-player>
                            </li>
                        </ul>
                        <div class="homeworkItemDes" v-html="list.content" @click="toStudentDetail(list)"></div>
                        <commentList :text="'点评 '" :commentObj="list" :type="'APP_MULTI_WORK'" :index="index"
                                     :classId="classId" ref="commentMethod"></commentList>
                        <div class="listPicesLine"></div>
                    </li>
                </ul>
            </div>
            <div v-if="role!=1">
                <div class="allSetComment" flex="main:center cross:center" @click="setComment(-1)">一键全部点评</div>
                <div class="unSubmitList" v-if="unReplyStudents.length>0">
                    <div class="showText">尚未提交作业学员</div>
                    <ul class="nameList">
                        <li v-for="name in unReplyStudents" v-text="name.studentName"></li>
                    </ul>
                </div>
            </div>
            <div class="canSeePanel" flex="main:justify cross:center" v-if="role==1">
                <div class="showText">作业相互可见</div>
                <div flex="cross:center">
                    <div class="canSeeText">不公开</div>
                    <div class="panelWrap" flex="cross:center" :class="{panelWrapFocus:ifPub==1}"
                         @click="setPub(ifPub)">
                        <div class="panel"></div>
                    </div>
                    <div class="canSeeText">公开</div>
                </div>
            </div>
            <div class="allBottomBtn" flex="main:center cross:center"
                 v-if="role==1 && apCore.submitState===2 && (dayList.length==1?focusDay>=dayList[dayCtrl.lastDayIndex]:(dayCtrl.lastDayIndex==0?focusDay>=dayList[dayCtrl.lastDayIndex]&&focusDay<dayList[dayCtrl.lastDayIndex+1]:focusDay>dayList[dayCtrl.lastDayIndex-1]&&focusDay<=dayList[dayCtrl.lastDayIndex]))"
                 @click="toMultiWorkCtrl">提交我的作业
            </div>
            <div class="allBottomBtn" flex="main:center cross:center"
                 v-if="role==1 && apCore.submitState===1 && (dayList.length==1?focusDay>=dayList[dayCtrl.lastDayIndex]:(dayCtrl.lastDayIndex==0?focusDay>=dayList[dayCtrl.lastDayIndex]&&focusDay<dayList[dayCtrl.lastDayIndex+1]:focusDay>dayList[dayCtrl.lastDayIndex-1]&&focusDay<=dayList[dayCtrl.lastDayIndex]))"
                 @click="toMultiWorkCtrl">修改我的作业
            </div>
            <div class="allBottomBtn" flex="main:center cross:center" v-if="role==1 && apCore.submitState==3">已完结</div>
            <shareModel :appName="'打卡作业'" :appCode="'APP_MULTI_WORK'"
                        :imgUrl="imgList.length>0?imgList[0].type==1?imgList[0].imgUrl:imgList[0].imgUrl+'?vframe/jpeg/offset/1/w/80':''"
                        :id="role==1?'&replyId='+replyId+'&appId='+appId+'&ifAll=false':'&day='+focusDay+'&appId='+appId+'&ifAll=false'"
                        :shareUrl="shareUrl" :role="role" v-if="core"></shareModel>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {domain, imagedomain} from '../../../api/api.js'
    import '../../../vendor/js/swiper.min.js'
    import audioPlayer from '../../../components/audioComponent.vue'
    import shareModel from '../../../components/shareModel.vue'
    import commentList from '../../../components/commentList.vue'
    const api = new API();
    export default{
        data(){
            return {
                imagedomain: imagedomain,
                role: this.$route.query.role ? this.$route.query.role : '',
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                appId: this.$route.query.appId ? this.$route.query.appId : this.$route.query.tid,
                shareUrl: '',
                shareInfo: '',
                replyId: '',
                core: '',
                user: '',
                nowTime: '',
                ifPub: 1,
                praiseState: '',
                today:'',
                imgList: [],
                audioList: [],
                extand: true,
                timeSwiper: '',
                dayList: [],
                dayCtrl: '',
                replyList: [],
                unReplyStudents: [],
                focusDay: '',
                apCore:''
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.$nextTick(function () {
                setTimeout(() => {
                    this.propsTitle();
                }, 300)
                this.getDetail();
            })
        },
        components: {
            audioPlayer,
            commentList,
            shareModel
        },
        methods: {
            toStudentDetail(list){
                if (this.role != 1 || list.myself) {
                    this.$router.push({
                        path: '/app/multiwork/studentDetail',
                        query: {
                            studentId: list.studentId,
                            classId: this.classId,
                            coreId: this.appId,
                            day: this.focusDay,
                            role: this.role
                        }
                    })
                }
            },
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, () => {})
                this.$util.JsBridge('refreshAppCellInfo',{},()=>{})
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '打卡作业',
                }, (res) => {})
            },
            closeAllAudio(){
                this.$refs.audio.forEach((el, elIndex) => {
                    this.$refs.audio[elIndex].closeAudio();
                });
            },
            changeDate(index){
                this.ifPub=1;
                this.timeSwipe.slideTo(index);
                this.focusDay = this.dayList[index];
                this.getMultiReplyList();
                this.getMultiPersonList();
            },
            closeAllAudio(){
                this.$refs.audio.forEach((el, elIndex) => {
                    this.$refs.audio[elIndex].closeAudio();
                });
            },
            changeExtand(){
                if (this.extand) {
                    this.extand = false;
                    this.$refs.extandIcon.style.transform = 'rotate(180deg)'
                } else {
                    this.extand = true;
                    this.$refs.extandIcon.style.transform = 'rotate(0)'
                }
            },
            getDetail () {
                let param = {
                    tid: this.appId,
                    classId: this.classId,
                    role: this.role
                };
                api.getMultiDetail(param).then(res => {
                    let {rs, code} = res;
                    if (code == 200) {
                        if (rs.user.userPhoto === '') {
                            rs.user.userPhoto = this.$util.getDefaultHeader(rs.user.userId);
                        }
                        this.shareUrl = rs.shareUrl;
                        this.user = rs.user;
                        this.praiseState = rs.praiseState;
                        this.today=rs.today;
                        this.nowTime = rs.now;
                        this.core = rs.core;
                        if (rs.pices) {
                            rs.pices.map((e, index) => {
                                if (e.type == 2) {
                                    this.audioList.push(e)
                                } else {
                                    this.imgList.push(e)
                                }
                            })
                        }
                        this.$nextTick(function () {
                            new Swiper('.extandSwiper', {
                                slidesPerView: 1.2,
                                spaceBetween: 8,
                                observer: true,
                                observeParents: true,
                            });
                            document.documentElement.scrollTop=1;
                            document.body.scrollTop=1;
                        })
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiDetail',success:false,data:res}));
                    }
                    return rs.core.tid;
                }).then((coreId) => {
                    this.getMultiDateList(coreId);
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiDetail',success:false,data:'网络异常'}));
                });
            },
            getMultiDateList(coreId){
                let param = {
                    coreId: coreId,
                    classId: this.classId,
                    role: this.role
                };
                api.getMultiDateList(param).then(res => {
                    let {rs, code} = res;
                    if (code == 200) {
                        rs.dayList.map((e) => {
                            this.dayList.push(e.exTime1)
                        })
                        this.dayCtrl = rs;
                        if(this.dayCtrl.surplusDay){
                            this.focusDay=this.dayList[0]
                        }else{
                            if(this.dayCtrl.lastDayIndex===-1){
                                this.focusDay=this.dayList[this.dayList.length-1]
                            }else{
                                this.focusDay=this.dayList[this.dayCtrl.lastDayIndex]
                            }
                        }
                        this.$nextTick(function () {
                            this.getMultiReplyList();
                            this.getMultiPersonList();
                            this.timeSwipe = new Swiper('.timeSwiper', {
                                speed: 800,
                                initialSlide:this.dayCtrl.surplusDay?0:(this.dayCtrl.lastDayIndex==-1?this.dayList.length-1:this.dayCtrl.lastDayIndex),
                                slidesPerView: 5,
                                observer: true,
                                observeParents: true,
                                centeredSlides: true,
                                onSlideChangeEnd: (swiper) => {
                                    this.focusDay = this.dayList[swiper.activeIndex];
                                    this.getMultiReplyList();
                                    this.getMultiPersonList();
                                }
                            })
                        })
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiDateList',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiDateList',success:false,data:'网络异常'}));
                });
            },
            getMultiPersonList(){
                let param = {
                    tid: this.core.tid,
                    classId: this.classId,
                    day: this.focusDay
                };
                api.getMultiPersonList(param).then(res => {
                    let {rs, code} = res;
                    if (code == 200) {
                        this.unReplyStudents = rs.notReplyStudents;
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiPersonList',success:false,data:res}));
                    }
                }).then(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiPersonList',success:false,data:'网络异常'}));
                });
            },
            getMultiReplyList(){
                let param = {
                    coreId: this.core.tid,
                    classId: this.classId,
                    day: this.focusDay,
                    role: this.role
                };
                api.getMultiReplyList(param).then(res => {
                    let {rs, code} = res;
                    if (code == 200) {
                        if (rs.workReplys) {
                            this.replyList = rs.workReplys;
                        } else {
                            this.replyList = [];
                        }
                        if(rs.apCore){
                            this.apCore=rs.apCore;
                        }
                        if (rs.selfReply) {
                            rs.selfReply.myself = true;
                            this.ifPub = rs.selfReply.exInt2;
                            this.replyId = rs.selfReply.tid;
                            this.replyList.unshift(rs.selfReply);
                        }else{
                            this.replyId='';
                        }
                        if (this.replyList) {
                            if (this.replyList.length > 0) {
                                this.replyList.map((e) => {
                                    if (e.student.photoUrl === '') {
                                        e.student.photoUrl = this.$util.getDefaultHeader(e.student.studentId)
                                    }
                                })
                            }
                        }
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiReplyList',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getMultiReplyList',success:false,data:'网络异常'}));
                });
            },
            clickZan(){
                let param = {
                    focusType: 501,
                    appId: this.appId,
                }
                this.praiseState == 1 ?
                    api.cancelZan(param).then(res => {
                        let {code} = res;
                        if (code == 200) {
                            this.praiseState = 0;
                        }else{
                            this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'cancelZan',success:false,data:res}));
                        }
                    }).catch(()=>{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'cancelZan',success:false,data:'网络异常'}));
                    }) : api.clickZan(param).then(res => {
                    let {code} = res;
                    if (code == 200) {
                        this.praiseState = 1;
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'clickZan',success:false,data:res}));
                    }
                }).catch(()=>{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'clickZan',success:false,data:'网络异常'}));
                    })
            },
            toMultiWorkCtrl(){
                this.$router.push({
                    path: '/app/multiwork/submit',
                    query: {
                        coreId: this.appId,
                        classId: this.classId,
                        replyId: this.replyId,
                        role: this.role,
                        isDetail: 1
                    }
                })
            },
            setPub(ifPub){
                if (this.replyId == '') {
                    this.$toast('您还未提交作业哦!')
                    return
                }
                ifPub == 1 ? ifPub = 2 : ifPub = 1;
                let param = {
                    coreDetailId: this.replyId,
                    ifPub: ifPub
                }
                api.setMultiPub(param).then(res => {
                    let {code} = res;
                    if (code == 200) {
                        this.ifPub == 2 ? this.ifPub = 1 : this.ifPub = 2;
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'setMultiPub',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'setMultiPub',success:false,data:'网络异常'}));
                })
            },
            shareTch(){
                let param = {
                    shareCode: 'APP_MULTI_WORK',
                    classId: this.classId,
                    tid: this.appId
                };
                api.getShareInfo(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.shareInfo = rs;
                    }else{
                        this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getShareInfo',success:false,data:res}));
                    }
                }).then(() => {
                    this.$util.JsBridge('share', {
                        imgUrl: this.imgList.length > 0 ? this.imgList[0].type == 1 ? this.imgList[0].imgUrl : this.imgList[0].imgUrl + '?vframe/jpeg/offset/1/w/80' : '',
                        title: this.shareInfo.title,
                        content: this.shareInfo.content,
                        type: -1,
                        shareUrl: this.shareUrl + '&appId=' + this.appId + '&role=' + this.role,
                        tid: this.appId
                    }, (res) => {
                    })
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:'getShareInfo',success:false,data:'网络异常'}));
                })
            },
            setComment(index, replyId){
                let secIdList = [];
                if (index === -1) {
                    this.replyList.map((e) => {
                        secIdList.push(e.tid)
                    })
                    secIdList = secIdList.join(',')
                }
                if (secIdList === '') {
                    this.$toast('还没有学员提交作业哦!')
                    return
                }
                this.$util.JsBridge('setComment', {
                        limit: 500,
                        placeHolder: '请输入500字以内评论'
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content);
                            const param = {
                                classId: this.classId,
                                type: data.type,
                                appId: this.appId,
                                secId: index === -1 ? '' : replyId,
                                secIds: index === -1 ? secIdList : '',
                                content: data.content,
                                appCode: 'APP_MULTI_WORK'
                            }
                            if (index == '' && replyId == 0) {
                                param.revUserId = this.core.createUserId
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            let logApi=index === -1 ?'setAllComment':'setComment';
                            let response = index === -1 ? api.setAllComment(param) : api.setComment(param);
                            response.then((res) => {
                                let {code, rs} = res;
                                if (code === 200) {
                                    if (index === '') {
                                        this.$refs.selfCommentList.sonSetComment(rs)
                                    } else if (index === -1) {
                                        this.replyList.map((e, elIndex) => {
                                            this.$refs.commentMethod[elIndex].sonSetComment(rs);
                                        })
                                    } else {
                                        this.$refs.commentMethod[index].sonSetComment(rs);
                                    }
                                }else{
                                    this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:logApi,success:false,data:res}));
                                }
                            }).catch(()=>{
                                this.$util.sendLog(1,'APP_MULTI_WORK',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'打卡作业',code:'APP_MULTI_WORK',path: '/app/multiwork/detail',api:logApi,success:false,data:'网络异常'}));
                            })
                        }
                    }
                )
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    e.imgUrl = e.imgUrl;
                    if (e.type == 3) {
                        e.coverUrl = e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    .commentWrapper {
        padding: 0 0.12rem 0 0.12rem;
    }

    .audioListDetail {
        margin-top: 0.03rem;
    }

    .audioList {
        .audioItem {
            padding-bottom: 0.08rem;
            padding-left: 0.08rem;
        }
        .audioItem:nth-last-child(1) {
            padding-bottom: 0;
        }
    }

    .extandSwiper .swiper-slide {
        height: 2rem;
        overflow: hidden;
        background: #d8d8d8;
        .picesItem {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .swiperContainer{
        height: 0.35rem;
        width: 2.05rem;
    }
    .timeSwiper{
        width: 100%;
        height: 100%;
    }
    .timeSwiper .swiper-slide {
        font-size: 0.09rem;
        opacity: 0.5;
        height: 100%;
        width: 2.05rem;
    }

    .timeSwiper .swiper-slide-prev {
        font-size: 0.11rem;
    }

    .timeSwiper .swiper-slide-next {
        font-size: 0.11rem;
    }

    .timeSwiper .swiper-slide-active {
        font-size: 0.13rem;
        opacity: 1;
    }

    .oneImgBg {
        padding: 0 0.12rem;
        width: 100%;
        height: 2rem;
        overflow: hidden;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .container {
        height: 100%;
        background: #0d0d0d;
    }

    .userInfo {
        padding: 0.12rem;
    }

    .userHeader {
        width: 0.34rem;
        height: 0.34rem;
        border-radius: 100%;
    }

    .userName {
        margin-left: 0.12rem;
    }

    .extand {
        font-size: 0.12rem;
        color: #17A5AF;
        margin-left: 0.12rem;
        margin-right: 0.06rem;
    }

    .extandIcon {
        width: 0.1rem;
    }

    .msgInfo {
        margin-top: 0.24rem;
        span {
            font-size: 0.15rem;
            color: #17A5AF;
            opacity: 1;
            padding: 0 0.06rem;
        }
    }

    .title {
        padding: 0 0.12rem;
    }

    .content {
        padding: 0 0.12rem;
        margin-top: 0.08rem;
        margin-bottom: 0.12rem;
        opacity: 0.8;
    }

    .commentWrap {
        padding: 0.07rem 0.12rem 0.12rem 0.12rem;
    }

    .userCtrl {
        padding: 0.15rem;
    }

    .zan {
        width: 0.15rem;
        height: 0.14rem;
    }

    .qes {
        width: 0.16rem;
        height: 0.16rem;
    }

    .share {
        width: 0.14rem;
        height: 0.13rem;
    }

    .panelText {
        margin-left: 0.07rem;
        font-size: 0.1rem;
    }

    .bgBottom {
        background: rgba(0, 0, 0, .5);
        width: 100%;
        height: 0.12rem;
    }

    .dateCtrl {
        width:100%;
        padding: 0.2rem 0;
        height: 0.76rem;
        box-sizing: border-box;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
    }

    .timeModel {
        width:0.6rem;
        padding:0 0.12rem;
        box-sizing: content-box;
        height: 100%;
    }

    .dateTime {
        margin-top: 0.1rem;
        text-align: center;
    }

    .homeworkList {
        padding: 0.12rem 0 0.12rem 0.12rem;
        .homeworkItem {
            padding-top: 0.12rem;
        }
        .homeworkItemDes {
            margin-top: 0.12rem;
            margin-bottom: 0.04rem;
            font-size: 0.12rem;
        }
    }

    .listTitle {
        padding-right: 0.12rem;
        .listPhoto {
            background: #d8d8d8;
            width: 0.34rem;
            height: 0.34rem;
            border-radius: 100%;
            margin-right: 0.1rem;
        }
        .listTime {
            font-size: 0.1rem;
            opacity: 0.5;
        }
        .setComment {
            background: rgba(255, 255, 255, .16);
            border-radius: 0.06rem;
            width: 0.49rem;
            height: 0.21rem;
            font-size: 0.11rem;
            font-family: PingFangSC-Medium;
        }
    }

    .listPices {
        margin-top: 0.12rem;
        width: 100%;
        background: transparent;
        display: inline-flex;
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        .listPicesItem {
            position: relative;
            background: #d8d8d8;
            width: 1rem;
            height: 1rem;
            margin-right: 0.08rem;
            overflow: hidden;
            .picesItem {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .listPicesLine {
        background: rgba(255, 255, 255, .2);
        width: 3.63rem;
        height: 0.5px;
        margin-top: 0.12rem;
    }

    .allSetComment {
        margin-top: 0.11rem;
        margin-left: 1.41rem;
        margin-bottom: 0.24rem;
        background: rgba(255, 255, 255, .16);
        border-radius: 0.06rem;
        width: 0.94rem;
        height: 0.23rem;
        font-family: PingFangSC-Medium;
        font-size: 0.11rem;
    }

    .showText {
        font-size: 0.12rem;
        opacity: 0.5;
        padding-left: 0.12rem;
    }

    .unSubmitList {
        border-bottom: 0.5px solid rgba(255, 255, 255, .2);
    }

    .nameList {
        padding-left: 0.12rem;
        margin-top: 0.15rem;
        padding-bottom: 0.12rem;
        overflow: hidden;
        li {
            float: left;
            margin-right: 0.2rem;
            margin-bottom: 0.12rem;
            font-size: 0.12rem;
        }
    }

    .canSeePanel {
        padding: 0.12rem 0.12rem 0.12rem 0;
        border-bottom: 0.5px solid rgba(255, 255, 255, .2);
    }

    .canSeeText {
        font-size: 0.1rem;
        opacity: 0.5;
    }

    .panelWrap {
        margin: 0 0.06rem;
        border-radius: 0.54rem;
        width: 0.37rem;
        height: 0.19rem;
        -webkit-animation: changeWrap 0.5s;
        -webkit-animation-fill-mode: forwards;
        .panel {
            background: #ffffff;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 100%;
            -webkit-animation: changePanel 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
    }

    .panelWrapFocus {
        background: #17A5AF;
        margin: 0 0.06rem;
        border-radius: 0.54rem;
        width: 0.37rem;
        height: 0.19rem;
        -webkit-animation: changeWrapFocus 0.5s;
        -webkit-animation-fill-mode: forwards;
        .panel {
            background: #ffffff;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 100%;
            -webkit-animation: changePanelFocus 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
    }

    @-webkit-keyframes changePanelFocus {
        from {
            -webkit-transform: transLateX(0.02rem)
        }
        to {
            -webkit-transform: transLateX(0.19rem)
        }
    }

    @-webkit-keyframes changePanel {
        from {
            -webkit-transform: transLateX(0.19rem)
        }
        to {
            -webkit-transform: transLateX(0.02rem)
        }
    }

    @-webkit-keyframes changeWrapFocus {
        from {
            background: rgba(255, 255, 255, 0.16)
        }
        to {
            background: #17A5AF;
        }
    }

    @-webkit-keyframes changeWrap {
        from {
            background: #17A5AF;
        }
        to {
            background: rgba(255, 255, 255, 0.16)
        }
    }
</style>